<template>
    <div>
        <div class="add_Bg" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
            <div class="pageHeader">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/userManage' }">用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>{{pageName}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <span style="float:right;margin-top:-30px;margin-right:20px"><label class="red">*</label>为必填项</span>
            <hr style='border:0.1px inset #909399;'>

            <div class="addContent">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="float:left;margin-left:100px">
                    <div style="margin-left:-50px;color:#606266;font-size:16px;font-weight:bold">基础信息</div><br><br>
                    <el-form-item label="登录账号" prop="account" style="width:400px;" >
                        <el-input v-model="ruleForm.account"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password"  style="width:400px">
                        <el-input v-model="ruleForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名" prop="name"  style="width:400px">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="员工性别" prop="gender">
                        <el-radio-group v-model="ruleForm.gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="手机号码" style="width:400px">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱地址" style="width:400px">
                        <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="所属部门">
                        <el-select v-model="ruleForm.department" placeholder="请选所属部门" style="width:560px">
                        <el-option label="部门一" value="shanghai"></el-option>
                        <el-option label="部门二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="当前职务">
                        <el-select v-model="ruleForm.job" placeholder="当前职务" style="width:560px">
                        <el-option label="职务一" value="shanghai"></el-option>
                        <el-option label="职务二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="当前角色">
                        <el-select v-model="ruleForm.role" placeholder="请选择当前角色" style="width:560px">
                        <el-option label="角色一" value="shanghai"></el-option>
                        <el-option label="角色二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权限设置" prop="permissions">
                        <el-checkbox-group v-model="ruleForm.permissions">
                        <el-checkbox label="超级管理员" name="type"></el-checkbox>
                        <el-checkbox label="管理员" name="type"></el-checkbox>
                        <el-checkbox label="普通用户" name="type"></el-checkbox>
                        <el-checkbox label="专项用户" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                <el-form-item label="座机/分机">
                        <el-input v-model="ruleForm.areaCode" placeholder="电话区号" style="width:120px">
                        </el-input>
                        <el-input v-model="ruleForm.seatNum" placeholder="座机号/电话号" style="width:300px">
                        </el-input>
                        <el-input v-model="ruleForm.extensionNum" placeholder="分机号" style="width:120px">
                        </el-input>
                </el-form-item>
                <div style="margin-left:-50px;color:#606266;font-size:16px;font-weight:bold">辅助信息</div><br><br>
                <el-form-item label="工号" style="width:400px">
                    <el-input v-model="ruleForm.jobNum"></el-input>
                </el-form-item>
                <el-form-item label="籍贯" style="width:400px">
                    <el-input v-model="ruleForm.nativePlace"></el-input>
                </el-form-item>
                <el-form-item label="毕业院校" style="width:400px">
                    <el-input v-model="ruleForm.school"></el-input>
                </el-form-item>
                <el-form-item label="毕业时间" style="width:400px">
                     <el-date-picker type="date" placeholder="选择毕业时间" v-model="ruleForm.graduationTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="学历">
                    <el-select v-model="ruleForm.education" placeholder="请选择学历" style="width:560px">
                        <el-option label="大专" value="dz"></el-option>
                        <el-option label="本科" value="bk"></el-option>
                        <el-option label="硕士" value="ss"></el-option>
                        <el-option label="博士" value="bs"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所学专业" style="width:400px">
                    <el-input v-model="ruleForm.major"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="submitForm('ruleForm')" >提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
                </el-form>
                 
            </div>
        </div>
    </div>
</template>

<script>
export default {
     data() {
      return {
        pageName: '',
        ruleForm: {
          account:'',
          password:'',  
          name: '',
          gender:'',
          phone:'',
          email:'',
          department:'',
          job:'',
          role:'',
          permissions: [],
          areaCode: '',
          seatNum: '',
          extensionNum: '',
          jobNum: '',
          nativePlace: '',
          school: '',
          graduationTime: '',
          education: '',
          major: '',
          remarks: '',
        },
        rules: {
          account: [
            { required: true, message: '请输入登录账号', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入员工姓名', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择员工性别', trigger: 'change' }
          ],
          permissions: [
            { type: 'array', required: true, message: '请至少选择一个权限', trigger: 'change' }
          ],
        //   date1: [
        //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        //   ],
        //   date2: [
        //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        //   ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created:function () {
        this.pageName = this.$route.query.pageName
    }
}
</script>

<style lang="less" scoped>
.add_Bg {
    width: 80%;
    height: 1400px;
    margin-top: 20px;
    margin-bottom: 50px;
    background-color: rgb(243, 247, 245);

    .pageHeader {
        padding-top: 20px;
        margin-left: 20px;
        height: 40px;
        // background-color: antiquewhite;
    }

    .red {
        color: red;
    }

    .addContent {
        margin-top: 20px;
        margin-bottom: 40px;
        // background-color: aqua;
        
    }
}

</style>